const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');
module.exports = defineConfig({
  css: {
    loaderOptions: {
      sass: {
        // options here will be passed directly to sass-loader
      }
    }
  },
  // 显式声明需要 transpile 的依赖
  transpileDependencies: true,
  // ...其他配置...
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        // 定义一个全局常量，值为当前时间戳
        'process.env.VERSION': JSON.stringify(Date.now()),
      }),
    ],
    output: {
      // 在输出文件名中使用版本号
      filename: `js/[name].${process.env.VERSION}.js`,
      chunkFilename: `js/[name].${process.env.VERSION}.js`,
    },
  },
  chainWebpack: config => {
    // 修改静态资源的引用，添加版本号, // 优化图片处理规则
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp|avif)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => ({
        limit: 4096, // 小于 4KB 的文件转为 base64
        name: `img/[name].${process.env.VERSION}.[hash:8].[ext]`,
        esModule: false, // 兼容 Vue 2/3 的模板语法
        // fallback: {
        //   ...(options && options.fallback),
        //   name: `img/[name].${process.env.VERSION}.[hash:8].[ext]`
        // }
      }));
    // 类似地，你可以为其他类型的静态资源添加版本号
  },
})
